<template>
  <div class="wrapper">
    <!-- 面包屑布局 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>全部商品</el-breadcrumb-item>
        <el-breadcrumb-item>分类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 头部 -->
    <header>
      <h3>分类</h3>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane
          label="全部"
          @click="
            $router.push('/goods');
            handleClick();
          "
        >
        </el-tab-pane>
        <el-tab-pane
          v-for="item in headerList"
          :key="item.category_id"
          :label="item.category_name"
          :name="item.category_id + ''"
          @click="$router.push(`/goods?categoryID=${item.category_id}`)"
        >
        </el-tab-pane>
      </el-tabs>
    </header>
    <div class="mobile-wrapper">
      <!-- v-if="cate.length != 0" -->
      <div class="mobile-box">
        <div class="imgs-right">
          <div
            class="imgs-item"
            v-for="item in activeName == '0' ? GoodsList : Product"
            :key="item.product_id"
          >
            <div class="imgs-box">
              <img
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                alt=""
                @click="tiao(item.product_id)"
              />
            </div>
            <div class="imgs-zi">
              <h2>{{ item.product_name }}</h2>
              <h3>{{ item.product_title }}</h3>
              <p>
                <span> {{ item.product_price }}元</span>
                <span
                  class="del"
                  v-show="item.product_price !== item.product_selling_price"
                  >{{ item.product_price }}元</span
                >
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- <div v-else style="font-size: 30px; padding: 30px">
        亲❣ 没有您要搜索的商品哦！
      </div> -->
    </div>

    <!-- 分页 -->
    <el-pagination
      @size-change="
        (v) => {
          pueryModel.pageSize = v;
          getGoodsList();
        }
      "
      @current-change="
        (v) => {
          pueryModel.currentPage = v;
          getGoodsList();
        }
      "
      :current-page="pueryModel.currentPage"
      :page-sizes="[5, 10, 15, 20, 25, 30, 35]"
      :page-size="pueryModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import {
  AllHeader, //分类头部
  GoodsAll, //全部数据
  getProductByCategory,
} from "@/api/good";
export default {
  name: "goods",
  data() {
    return {
      cate: this.$store.state.searchdata,
      activeName: 0, //默认激活
      headerList: [], //头部
      GoodsList: [], //全部数据
      pueryModel: {
        currentPage: 1,
        pageSize: 15,
      },
      total: 0, //总条数
      Product: [],
    };
  },
  created() {
    this.getHeaderList();
    if (this.cate.length == 0) {
      this.getGoodsList();
    } else {
      this.getsearch();
    }
  },
  methods: {
    /**
     * 跳转详情
     */
    tiao(type) {
      this.$router.push({
        path: "/goods/details", //跳转的路由
        query: {
          //跳转路由的参数
          type: type, //前面的type是参数的名称
        },
      });
    },
    /**
     * 点击头部渲染
     */
    async handleClick() {
      console.log(this.activeName);
      try {
        if (this.activeName == "0") {
          console.log(132);
          this.getGoodsList();
        }
        const obj = {
          ...this.pueryModel,
          categoryID: [Number(this.activeName)],
        };
        console.log(obj);
        const {
          data: { total, Product },
        } = await getProductByCategory(obj);
        this.Product = Product;
        this.total = total;
        console.log(Product, "getProductByCategory");
      } catch (error) {}
    },
    /**
     * 获取 分类头部
     */
    async getHeaderList() {
      const res = await AllHeader();
      console.log(res, "头部");
      if (res.data.code === "001") {
        this.headerList = res.data.category;
        console.log(res.data.Product);
      }
    },
    /**
     * 获取全部数据
     */
    async getGoodsList() {
      const res = await GoodsAll(this.pueryModel);
      console.log(res, "电视机");
      if (res.data.code === "001") {
        this.GoodsList = res.data.Product;
        this.total = res.data.total;
        console.log(res.data.Product);
        this.$notify.success({
          title: "成功",
          message: res.data.msg,
          showClose: true,
        });
      }
    },
    getsearch() {
      this.GoodsList = this.cate;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  font-size: 14px;
}
.wrapper {
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px !important;
  .breadcrumb {
    height: 60px;
    display: flex;
    align-items: center;
    font-size: 16px !important;
    .el-breadcrumb {
      width: 1225px;
      margin: 0px auto;
    }
  }
  header {
    width: 1225px;
    height: 40px;
    display: flex;
    // align-items: center;
    background: white;
    h3 {
      width: 50px;
      height: 40px;
      font-size: 16px;
      font-weight: 700;
      display: flex;
      align-items: center;
      float: left;
    }
  }

  .mobile-wrapper {
    width: 100%;
    background: #f5f5f5;
    // margin-top: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    .mobile-box {
      width: 1225px;
      // background: red;
      display: flex;
      justify-content: space-between;
      .imgs-item {
        z-index: 1;
        float: left;
        width: 230px;
        height: 280px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px 0;
        margin: 0 0 10px 13.7px;
        background-color: #fff;
        transition: all 0.2s linear;
        position: relative;
        &:hover.imgs-item {
          box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
          transform: translate3d(0, -2px, 0);
        }
        .imgs-box {
          width: 160px;
          height: 160px;
          img {
            width: 160px;
            height: 160px;
          }
        }

        .imgs-zi {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          .h2 {
            font-size: 14px;
            color: #333;
          }
          h3 {
            margin: 5px 10px;
            height: 18px;
            font-size: 12px;
            color: #b0b0b0;
          }
          p {
            span {
              margin: 10px 10px 10px;
              font-size: 16px;
              text-align: center;
              color: #ff6700;
            }
            .del {
              margin-left: 0.5em;
              color: #b0b0b0;
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }
}
</style>